/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* 主题颜色 */
  --el-color-primary: #409EFF;
  --el-color-success: #67C23A;
  --el-color-warning: #E6A23C;
  --el-color-danger: #F56C6C;
  --el-color-info: #909399;

  /* 背景颜色 */
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;

  /* 文字颜色 */
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;

  /* 边框颜色 */
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;

  /* 字体大小 */
  --el-font-size-extra-large: 20px;
  --el-font-size-large: 18px;
  --el-font-size-medium: 16px;
  --el-font-size-base: 14px;
  --el-font-size-small: 13px;
  --el-font-size-extra-small: 12px;

  /* 圆角 */
  --el-border-radius-base: 4px;
  --el-border-radius-small: 2px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;
}

/* 深色主题 */
html.dark {
  --el-bg-color: #141414;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color-overlay: #1d1e1f;
  
  --el-text-color-primary: #E5EAF3;
  --el-text-color-regular: #CFD3DC;
  --el-text-color-secondary: #A3A6AD;
  --el-text-color-placeholder: #8D9095;
  
  --el-border-color: #4C4D4F;
  --el-border-color-light: #363637;
  --el-border-color-lighter: #1D1D1D;
  --el-border-color-extra-light: #191919;

  color-scheme: dark;
}

body {
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
  transition: color 0.3s, background-color 0.3s;
}

#app {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--el-bg-color-page);
}

::-webkit-scrollbar-thumb {
  background: var(--el-text-color-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--el-text-color-regular);
}

/* 工具页面通用样式 */
.tool-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: var(--el-border-radius-base);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tool-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.tool-title {
  font-size: var(--el-font-size-extra-large);
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

.tool-description {
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-secondary);
  line-height: 1.6;
}

.tool-content {
  margin-bottom: 24px;
}

.tool-footer {
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-light);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .tool-container {
    padding: 16px;
  }

  .tool-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
  }

  .tool-title {
    font-size: var(--el-font-size-large);
  }

  .tool-content {
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .tool-container {
    padding: 12px;
  }

  .tool-header {
    margin-bottom: 16px;
    padding-bottom: 8px;
  }

  .tool-title {
    font-size: var(--el-font-size-medium);
  }

  .tool-footer {
    flex-direction: column;
  }
}
